<template>
  <div>
    <div class="top">
      <span>消息</span>
      <van-icon @click="addtap" class="top_icon" name="plus" />
    </div>
    <div class="input">
      <van-icon v-if="search == ''" class="input_icon" name="search" />
      <input
        @focus="inputTap"
        type="text"
        class="inputAl"
        v-model="search"
        placeholder="搜索"
      />
    </div>
    <div class="list" v-for="item of list" @click="messageTap">
      <div class="list_left">
        <van-badge :content="item.num">
          <img class="list_img" src="../../assets/images/logo.png" alt="" />
        </van-badge>
      </div>
      <div class="list_right">
        <div class="col1">
          <span class="col2">小明</span>
          <span class="col3">2020-08-21</span>
        </div>
        <div class="col1">
          <span class="col4" v-if="item.status == 1">电话:1510000000</span>
          <img v-if="item.status == 1" style="width:20px;" src="../../assets/images/ic_tixing.png" alt="">
          <!-- <span class="col5" v-if="item.status == 1">提醒</span> -->
        </div>
        <div class="col1">
          <span class="col3">[图片]</span>
          <!-- <span class="col3"></span> -->
        </div>
      </div>
    </div>
    <div class="list" @click="fuwuTap">
      <div class="list_left">
        <van-badge content="1">
          <img class="list_img" src="../../assets/images/fuwu.png" alt="" />
        </van-badge>
      </div>
      <div class="list_right">
        <div class="col1">
          <span class="col2">服务通知</span>
          <span class="col3">2020-08-21</span>
        </div>
        <div class="col1"></div>
        <div class="col1">
          <span class="col3">消息提醒: 要去买东西</span>
          <!-- <span class="col3"></span> -->
        </div>
      </div>
    </div>
    <div class="list" @click="newfirendTap">
      <div class="list_left">
        <van-badge content="1">
          <img
            class="list_img"
            src="../../assets/images/newfriend.png"
            alt=""
          />
        </van-badge>
      </div>
      <div class="list_right">
        <div class="col1">
          <span class="col2">新的朋友</span>
          <span class="col3">2020-08-21</span>
        </div>
        <div class="col1"></div>
        <div class="col1">
          <!-- <span class="col3">消息提醒: 要去买东西</span> -->
          <!-- <span class="col3"></span> -->
        </div>
      </div>
    </div>
    <div class="list" @click="aiTap">
      <div class="list_left">
        <van-badge content="1">
          <img class="list_img" src="../../assets/images/logo.png" alt="" />
        </van-badge>
      </div>
      <div class="list_right">
        <div class="col1">
          <span class="col2">AI团队</span>
          <span class="col3">2020-08-21</span>
        </div>
        <div class="col1"></div>
        <div class="col1">
          <span class="col3">你好，如果你有任何建议或投诉</span>
          <!-- <span class="col3"></span> -->
        </div>
      </div>
    </div>
    <van-overlay
      :show="show"
      @click="show = false"
      style="background: rgba(30, 30, 30, 0.5)"
    >
      <div class="wrapper" @click.stop>
        <div class="block">
          <div class="listBlock" @click="qunliaoTap">
            <van-icon class="iconBlock" name="friends-o" />
            <div class="listBlock1">发起群聊</div>
          </div>
          <div class="listBlock" @click="addpeopleTap">
            <van-icon class="iconBlock" name="add-o" />
            <div class="listBlock1">添加朋友</div>
          </div>
          <div class="listBlock" @click="scanTap">
            <van-icon class="iconBlock" name="scan" />
            <div class="listBlock1">扫一扫</div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      list: [
        { name: "[15条]丽丽: 明白", num: 10, status: 1 },
        {
          name: "你好，如果你有任何建议或投诉，请点击此处反...",
          num: 2,
          status: 1,
        },
      ],
      search: "",
    };
  },
  methods: {
    addtap() {
      this.show = true;
    },
    qunliaoTap() {
      console.log(12321);
      this.$router.push("/qunliao");
    },
    inputTap() {
      this.$router.push("/search");
    },
    addpeopleTap() {
      this.$router.push("/addPeole");
    },
    scanTap() {
      this.$router.push("/scan");
    },
    messageTap() {
      this.$router.push("/message");
    },
    fuwuTap() {
      this.$router.push("/msgallfuwu");
    },
    newfirendTap() {
      this.$router.push("/msgnewfriend");
    },
    aiTap() {
      this.$router.push("/msgai");
    },
  },
};
</script>
<style scoped>
.top {
  height: 60px;
  width: 100%;
  text-align: center;
  line-height: 60px;
  position: relative;
  background: #4AC7D7;
  color: white;
}
.input {
  height: 50px;
  width: 100%;
  text-align: center;
  line-height: 50px;
  position: relative;
  background: #eeeeee;
  
}
.input_icon {
  position: absolute;
  left: 43%;
  top: 15px;
  font-size: 18px;
}
.inputAl::-webkit-input-placeholder {
  padding-left: 5%;
}
.inputAl {
  height: 35px;
  width: 96%;
  border: none;
  text-align: center;
}
.text {
  width: 94%;
  margin-left: 3%;
}
.top span {
  font-size: 18px;
  /* font-weight: bold; */
}
.top_icon {
  position: absolute;
  right: 4%;
  top: 18px;
  font-size: 20px;
  color: #5f646e;
  border-radius: 50%;
  color: white;
}
.block {
  width: 140px;
  height: 150px;
  position: fixed;
  right: 15px;
  top: 45px;
  z-index: 100;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  z-index: 999;
}
.list {
  height: 90px;
  width: 100%;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
}
.list_left {
  width: 18%;
  margin-left: 3%;
  display: flex;
  flex-direction: column;
}
.list_img {
  width: 100%;
  height: 70px;
  border-radius: 10px;
}
.list_right {
  width: 74%;
}
.col1 {
  width: 100%;
  margin-left: 2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  font-size: 15px;
}
.col2 {
  font-weight: bold;
}
.col3 {
  font-size: 14px;
  color: #999999;
}
.col4,
.col5 {
  font-size: 14px;
  color: #000;
}
.listBlock {
  height: 50px;
  display: flex;
  align-items: center;
}
.iconBlock {
  font-size: 24px;
  margin-left: 10%;
  color: #4AC7D7;
}
.listBlock1 {
  width: 60%;
  height: 50px;
  line-height: 50px;
  margin-left: 5%;
  color: #4AC7D7;
  border-bottom: 1px solid #f5f5f5;
}
</style>